<template>
  <view>
    <view class="content" style="height: 60vh;">
      <u-gap height="10" bg-color="#f5f5f5"></u-gap>
      <u-form :model="form" label-align="left" label-width="80px">
        <u-form-item label="签到方式">
          <u-input v-model="form.typeLabel" clearable placeholder="签到方式" disabled @click="type = true"></u-input>
        </u-form-item>
        <u-form-item label="签到时长">
          <u-number-box v-model="form.duration" :step="1" :min="1" :max="100" integer :inputWidth="64" @blur="change"></u-number-box>
        </u-form-item>
        <u-form-item label="验证码" v-if="form.type == '1'">
          <u-code-input v-model="form.code" maxlength="4" mode="bottomLine"></u-code-input>
        </u-form-item>
      </u-form>
      <view class="submitBtn" @click="handleSubmit">提交</view>
    </view>
    <u-action-sheet :actions="typeList" :show="type" cancel-text="取消"
    @select="selectType" @close="type = false"></u-action-sheet>
  </view>
</template>

<script>
import {
  addSign
} from '@/api/subject'
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        type: '',
        typeLabel: '',
        duration: 10,
        code: ''
      },
      type: false,
      typeList: [
        {
          name: '拍照打卡',
          index: '0'
        },
        {
          name: '验证码打卡',
          index: '1'
        },
        { 
          name: '普通打卡',
          index: '2'
        }
      ]
    }
  },
  methods: {
    selectType(val) {
      this.$set(this.form, 'typeLabel', val.name)
      this.$set(this.form, 'type', val.index)
    },
    handleSubmit() {
      if((this.form.type ?? '') == '') {
        this.$toast.show({
          msg: '请选择签到方式'
        })
        return
      }
      if(this.form.type == '1' && (this.form.code ?? '') == '') {
        this.$toast.show({
          msg: '请设置签到验证码'
        })
        return
      }
      this.$loading.show()
      const params = {}
      params.id = new Date().getTime()
      params.subjectId = this.id
      params.type = this.form.type
      params.duration = this.form.duration
      params.code = this.form.code
      // #ifdef APP
      uni.getLocation({
        type: 'wgs84',
        isHighAccuracy: true,
        success: ({ longitude, latitude }) => {
          params.position = `${longitude || '116.026615'},${latitude || '28.687309'}`
          this.signRequest(params)
        },
        fail: () => {
          params.position = '116.026615,28.687309'
          this.signRequest(params)
        }
      })
      // #endif
      // #ifdef  H5
      params.position = '116.026615,28.687309'
      this.signRequest(params)
      // #endif
    },
    signRequest(params) {
      addSign(params).then(res => {
        if(res.code === 200) {
          uni.$emit('close')
        }
        this.$loading.hide()
        this.$toast.show({
          msg: res.msg
        })
      })
    },
    change(val) {
      if(!val.value) {
        this.form.duration = '1'
      }
    }
  },
  onLoad(options) {
    this.id = options.id
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer)
  }
} 
</script>

<style lang="scss" scoped>
.u-form {
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
}
.u-input {
  background-color: #ffffff !important;
}

</style>